package pages

import (
	"github.com/templui/templui/internal/ui/layouts"
	"github.com/templui/templui/internal/ui/modules"
	"github.com/templui/templui/internal/ui/showcase"
)

templ Dialog() {
	@layouts.DocsLayout(
		"Dialog",
		"Dialog overlay that requires user attention or interaction.",
		[]modules.TableOfContentsItem{
			{
				ID:   "installation",
				Text: "Installation",
			},
			{
				ID:   "examples",
				Text: "Examples",
				Children: []modules.TableOfContentsItem{
					{
						ID:   "external-trigger",
						Text: "External Trigger",
					},
					{
						ID:   "standalone",
						Text: "Standalone Content",
					},
				},
			},
			{
				ID:   "api-reference",
				Text: "API Reference",
				Children: []modules.TableOfContentsItem{
					{
						ID:   "dialog",
						Text: "Dialog",
					},
					{
						ID:   "trigger",
						Text: "Trigger",
					},
					{
						ID:   "content",
						Text: "Content",
					},
					{
						ID:   "header",
						Text: "Header",
					},
					{
						ID:   "title",
						Text: "Title",
					},
					{
						ID:   "description",
						Text: "Description",
					},
					{
						ID:   "body",
						Text: "Body",
					},
					{
						ID:   "footer",
						Text: "Footer",
					},
					{
						ID:   "close",
						Text: "Close",
					},
				},
			},
			{
				ID:   "javascript-api",
				Text: "JavaScript API",
			},
		},
	) {
		@modules.PageWrapper(modules.PageWrapperProps{
			Name:        "Dialog",
			Description: templ.Raw("Dialog overlay that requires user attention or interaction."),
			Tailwind:    true,
			VanillaJS:   true,
			Breadcrumbs: modules.Breadcrumbs{
				Items: []modules.BreadcrumbItem{
					{
						Text: "Docs",
						Path: "/docs",
					},
					{
						Text: "Components",
						Path: "/docs/components",
					},
					{
						Text: "Dialog",
					},
				},
			},
		}) {
			@modules.ExampleWrapper(modules.ExampleWrapperProps{
				SectionName:     "Default",
				ShowcaseFile:    showcase.DialogDefault(),
				PreviewCodeFile: "dialog_default.templ",
			})
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Installation",
				ID:    "installation",
			}) {
				@modules.ComponentUsage(modules.ComponentUsageProps{
					ComponentName: "dialog",
					JSFiles:       []string{"dialog"},
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Examples",
				ID:    "examples",
			}) {
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					ID:              "external-trigger",
					SectionName:     "External Trigger",
					ShowcaseFile:    showcase.DialogExternalTrigger(),
					PreviewCodeFile: "dialog_external_trigger.templ",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					ID:              "standalone",
					SectionName:     "Standalone Content",
					ShowcaseFile:    showcase.DialogStandalone(),
					PreviewCodeFile: "dialog_standalone.templ",
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "API Reference",
				ID:    "api-reference",
			}) {
				@modules.APILegend()
				<div id="dialog" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Dialog",
						Description: "Main dialog wrapper component. Provides context for child components.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "randomID",
								Description: "Unique identifier for the dialog",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the dialog container",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the dialog container",
							},
							{
								Name:        "DisableClickAway",
								Type:        "bool",
								Default:     "false",
								Description: "Whether to disable closing the dialog by clicking outside",
							},
							{
								Name:        "DisableESC",
								Type:        "bool",
								Default:     "false",
								Description: "Whether to disable closing the dialog with the ESC key",
							},
							{
								Name:        "Open",
								Type:        "bool",
								Default:     "false",
								Description: "Whether the dialog should be open initially",
							},
						},
					})
				</div>
				<div id="trigger" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Trigger",
						Description: "Element that triggers the dialog to open. Can be used inside Dialog wrapper or externally with For prop.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "\"\"",
								Description: "Unique identifier for the trigger element",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the trigger",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the trigger",
							},
							{
								Name:        "For",
								Type:        "string",
								Default:     "\"\"",
								Description: "ID of a specific dialog to trigger (for external triggers)",
							},
						},
					})
				</div>
				<div id="content" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Content",
						Description: "Dialog content container. Can be used standalone for HTMX or inside Dialog wrapper.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "\"\"",
								Description: "Dialog ID for standalone usage (when no context)",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the content",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the content",
							},
							{
								Name:        "HideCloseButton",
								Type:        "bool",
								Default:     "false",
								Description: "Whether to hide the default close button",
							},
							{
								Name:        "Open",
								Type:        "bool",
								Default:     "false",
								Description: "Initial open state for standalone usage",
							},
							{
								Name:        "DisableAutoFocus",
								Type:        "bool",
								Default:     "false",
								Description: "Whether to disable automatic focusing of the first focusable element",
							},
						},
					})
				</div>
				<div id="header" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Header",
						Description: "Header section of the dialog.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "\"\"",
								Description: "Unique identifier for the header element",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the header",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the header",
							},
						},
					})
				</div>
				<div id="title" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Title",
						Description: "Dialog title component. Should be used inside Header.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "\"\"",
								Description: "Unique identifier for the title element",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the title",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the title",
							},
						},
					})
				</div>
				<div id="description" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Description",
						Description: "Dialog description component. Should be used inside Header.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "\"\"",
								Description: "Unique identifier for the description element",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the description",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the description",
							},
						},
					})
				</div>
				<div id="body" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Body",
						Description: "Body/content section of the dialog.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "\"\"",
								Description: "Unique identifier for the body element",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the body",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the body",
							},
						},
					})
				</div>
				<div id="footer" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Footer",
						Description: "Footer section of the dialog.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "\"\"",
								Description: "Unique identifier for the footer element",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the footer",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the footer",
							},
						},
					})
				</div>
				<div id="close">
					@modules.APITable(modules.APITableProps{
						Title:       "Close",
						Description: "Element that closes the dialog.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "\"\"",
								Description: "Unique identifier for the close element",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the close element",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the close element",
							},
							{
								Name:        "For",
								Type:        "string",
								Default:     "\"\"",
								Description: "ID of the dialog to close (defaults to closest dialog if empty)",
							},
						},
					})
				</div>
				@modules.ContainerWrapper(modules.ContainerWrapperProps{
					Title: "JavaScript API",
					ID:    "javascript-api",
				}) {
					@modules.Code(modules.CodeProps{
						Language:       "javascript",
						ShowCopyButton: true,
						CodeContent: `// Open a dialog programmatically
window.tui.dialog.open("dialog-id");

// Close a dialog
window.tui.dialog.close("dialog-id");

// Toggle dialog state
window.tui.dialog.toggle("dialog-id");

// Check if dialog is open (returns true/false)
const isOpen = window.tui.dialog.isOpen("dialog-id");`,
					})
				}
			}
		}
	}
}
